<template>
    <el-dialog :title="title" :visible.sync="visible" :width="width" :before-close="handleClose">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form :inline="false" ref="form" :model="form" label-width="100px">

                    <el-form-item label="群发名称" size="mini" prop="title">
                        <el-input placeholder="请输入群发任务名称" v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="" size="mini" prop="checked">
                        <el-checkbox v-model="form.checked">允许员工调整发送范围</el-checkbox>
                    </el-form-item>
                    <el-form-item label="群发内容" size="mini" prop="content">
                        <el-input type="textarea" v-model="form.content" :rows="5" placeholder="请输入群发内容"></el-input>
                    </el-form-item>

                </el-form>
            </el-col>
            <el-col :span="12">
                <el-form :inline="false" ref="form_client" :model="form_client" label-width="100px">
                    <el-form-item label="时间筛选" size="mini" prop="add_date">
                        <el-date-picker
                            v-model="form.add_date"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="标签筛选" size="mini">
                        <el-cascader
                            size="mini"
                            v-model="selectedValue"
                            :options="tabOptions"
                            :show-all-levels="false"
                            @change="handleChange"
                        ></el-cascader>
                        <el-button  v-show="isDisabled" type="primary" size="mini" @click="openSiftTags">选择标签</el-button>
                    </el-form-item>
                    <el-form-item label="员工筛选" size="mini">
                        <el-select size="mini" multiple filterable v-model="form.assistant" placeholder="请选择员工">
                            <el-option v-for="item in assistantData" :key="item.userid" :label="item.name"
                                       :value="item.userid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-table
                    :data="client.list"
                    style="width: 100%"
                >
                    <el-table-column
                        prop="date"
                        :label="'总邀约[ '+total_num+' ]人'"
                        width="">
                    </el-table-column>
                </el-table>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="client.pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="client.pageSize"
                               background layout="total, sizes, prev, pager, next, jumper" :total="client.total"> </el-pagination>
            </el-col>
        </el-row>
        <el-row :gutter="20">
        </el-row>
        <sift-tags
            title="标签筛选"
            :visible="isSiftTags"
            width="60%"
            :append_to_body="true"
            @close="closeSiftTags"
        ></sift-tags>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleClose">保存并发布</el-button>
        </span>
    </el-dialog>
</template>


<script>
	import Panle from '@/components/Panle.vue'
    import PersButton from '@/components/PersButton'
    import SelectImg from "@/components/select-img.vue"
    import SiftTags from "@/views/scrm/qunfa/components/sift_tags.vue";
    import {getAssistant} from "@/api/scrm/client/clientList";
    import {dateFormat} from "@/utils";
    export default {
        name: 'createPlanForm',props: {
            visible: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: ''
            },
            width: {
                type: String,
                default: '30%'
            },
            append_to_body: {
                type: Boolean,
                default: false
            }
        },
        components: {
            PersButton,
            SelectImg,
			Panle,
            SiftTags,
        },
        data() {
            return {
                form: {
                    title: "",
                    checked: false,
                    content: "",
                    checkList: []
                },
                form_client: {
                    add_date: [dateFormat(new Date(), 'yyyy-MM-dd') + ' 00:00:00', dateFormat(new Date(), 'yyyy-MM-dd') + ' 23:59:59'],
                    checked: false,
                    content: "",
                    checkList: []
                },
                loading: false,
                total_num: 0,
                isDisabled: false,
                isSiftTags: false,
                selectedValue:[],
                assistantData: [],
                tabOptions: [
                    {
                        value: '1',
                        label: '包含企业标签',
                        children: [
                            {
                                value: '11',
                                label: '满足其一'
                            },
                            {
                                value: '12',
                                label: '同时满足'
                            }
                        ]

                    },
                    {
                        value: '2',
                        label: '不包含企业标签',
                    },
                    {
                        value: '13',
                        label: '无标签'
                    }
                ],
                client: {
                    pageNumber: 1,
                    pageSize: 10,
                    total: 0,
                    list: []
                }
            }
        },
        created() {
            // 或者通过$route获取参数
            // console.log(this.$route.query.liveId)
            this.init()

        },

        methods: {
            // 关闭弹窗
            handleClose() {
                this.$emit('close');
                this.verifyInput = null;
            },
            // 初始化
            init() {
                this.loading = true
                getAssistant({

                }).then(res => {
                    this.assistantData = res.data.userlist;
                });
            },
            // 标签变化
            handleChange(value) {
                this.form.qwtype = value[value.length-1];
                if (this.form.qwtype == 13) {
                    this.isDisabled = false;
                }else {
                    this.isDisabled = true;
                }
            },
            //选择标签，打开标签弹窗
            openSiftTags() {
                this.isSiftTags = true;
            },
            //关闭标签弹窗
            closeSiftTags() {
                this.isSiftTags = false;
            },
			submitForm:function(data){
			    this.$refs[data].validate((valid) => {
					console.log(999);
					console.log(valid);
					console.log(data);
					console.log(this.form);
					this.open=false;
			    })
			
			},
            handleSizeChange: function(e) {
                console.log(e);
                this.client.pageSize = e;
                this.init();
            },
            handleCurrentChange: function(e) {
                console.log(e);
                this.client.pageNumber = e;
                this.init();
            },

        }

    }
</script>

<style lang="scss" scoped>
    @import "@/assets/css/common";
</style>